<template>
  <page-view>
    <div class="page">
      <div
          class="column"
          ref="column"
          v-for="(item, index) in columnList"
          :key="index"
      >
        <img class="img" v-for="(n, i) in item" :key="i" :src="n" />
      </div>
    </div>
  </page-view>
</template>

<script>
// 动态控制几列瀑布流
export default {
  name: "app-water-flow-dynamic",
  components:{},
  data() {
    return {
      // 所有图片
      imgList: [
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img2.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=2235903830,1856743055&fm=193&f=GIF",
        'https://t7.baidu.com/it/u=1635608122,693552335&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=1856946436,1599379154&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=813347183,2158335217&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=2084624597,235761712&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=3337661019,3898256580&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=1723458001,3671360301&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=2359570649,2574326109&fm=193&f=GIF'
      ],

      // 动态控制几列
      columnList: [],
      // 列宽度
      columnWidth: 0,
      columnCount:3,
    }
  },
  created() {
    // 初始化数据
    for (let i = 0; i < this.columnCount; i++) {
      // 生成每列图片数组
      this.columnList.push([]);
    }
  },
  mounted() {
    console.log('mounted')
    this.$nextTick(() => {
      this.setWaterFallLayout()
    })
  },
  methods:{
    // 瀑布布局 - 动态几列瀑布流
    async setWaterFallLayout() {
      for (let item of this.imgList) {

        let img = new Image();
        img.src = item;
        try {
          let imageH = await this.getImgHeight(img)

          // 每列高度数组:有几列该数组就有几个元素
          let columnHeights = this.$refs.column.map((item) => item.clientHeight);
          console.log('columnHeight:', columnHeights)
          // 找出最小高度值
          let min = Math.min(...columnHeights);
          // 找出最小高度列的索引
          let index = columnHeights.findIndex((item) => item === min);
          // 放入图片
          this.columnList[index].push(item);
          // 关键点：等待渲染完成后重新比较高度
          await this.$nextTick();
        } catch (e) {
          console.log('e：', e)
        }
      }
    },

    // 获取图片高度
    getImgHeight(img) {
      return new Promise((resolve,reject) => {
        // 图片加载完成
        img.onload = () => {
          // 计算图片渲染后高度
          let h = (img.height / img.width) * this.columnWidth;
          resolve(h);
        };
        // 加载出错
        img.onerror=()=>{
          reject('error')
        }
      });
    },
  }
}
</script>

<style scoped>
.page {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 10px 0 0 10px;
  box-sizing: border-box;
}

.column {
  flex: 1;
  padding: 0 10px 0 0;
  box-sizing: border-box;
  width: 0;
}

.img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
}
</style>
